<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业资料</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-blue-600 to-indigo-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-profile.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">企业资料</h1>
                <button onclick="saveCompanyInfo()" class="text-white hover:opacity-80">
                    <i class="fas fa-save text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Company Status Card -->
        <div class="px-4 py-3 bg-gradient-to-r from-blue-600 to-indigo-600">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4">
                <div class="flex items-center text-white">
                    <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-building text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-bold text-lg">优选数码科技有限公司</h3>
                        <div class="flex items-center mt-1">
                            <span class="bg-green-500 text-xs px-2 py-1 rounded-full mr-2">已认证</span>
                            <span class="text-xs opacity-80">统一社会信用代码: 91110000MA01234567</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scrollable Content -->
        <div class="h-[calc(852px-220px)] overflow-y-auto pb-20">
            <!-- Basic Information -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                    基本信息
                </h3>
                <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                    <div class="p-3 border-b border-gray-100">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">企业名称</span>
                            <div class="flex items-center">
                                <span class="text-sm font-medium mr-2">优选数码科技有限公司</span>
                            </div>
                        </div>
                    </div>
                    <div class="p-3 border-b border-gray-100">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">统一社会信用代码</span>
                            <div class="flex items-center">
                                <span class="text-sm font-medium mr-2">91110000MA01234567</span>
                                <button onclick="copyToClipboard('91110000MA01234567')" class="text-blue-600 text-xs">复制</button>
                            </div>
                        </div>
                    </div>
                    <div class="p-3 border-b border-gray-100">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">法定代表人</span>
                            <div class="flex items-center">
                                <span class="text-sm font-medium mr-2">张**</span>
                            </div>
                        </div>
                    </div>
                    <div class="p-3 border-b border-gray-100">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">注册资本</span>
                            <span class="text-sm font-medium">500万元人民币</span>
                        </div>
                    </div>
                    <div class="p-3 border-b border-gray-100">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">成立日期</span>
                            <span class="text-sm font-medium">2020年3月15日</span>
                        </div>
                    </div>
                    <div class="p-3">
                        <div class="flex justify-between items-start">
                            <span class="text-sm text-gray-600">注册地址</span>
                            <span class="text-sm font-medium text-right">北京市朝阳区建国路88号现代城A座1201室</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Business Scope -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                    经营范围
                </h3>
                <div class="bg-white rounded-lg border border-gray-200 p-4">
                    <p class="text-sm text-gray-700 leading-relaxed">
                        技术开发、技术推广、技术转让、技术咨询、技术服务；销售自行开发的产品；计算机系统服务；应用软件服务；软件开发；软件咨询；模型设计；包装装潢设计；教育咨询（中介服务除外）；经济贸易咨询；文化咨询；体育咨询；公共关系服务；会议服务；投资咨询；工艺美术设计；电脑动画设计；项目投资；投资管理；资产管理；企业策划、设计；设计、制作、代理、发布广告；市场调查；企业管理咨询；组织文化艺术交流活动（不含营业性演出）；文艺创作；承办展览展示活动；会议服务；影视策划；翻译服务。
                    </p>
                </div>
            </div>

            <!-- License Documents -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                    证照文件
                </h3>
                <div class="space-y-3">
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fas fa-building text-green-600 text-lg mr-3"></i>
                                <div>
                                    <p class="text-sm font-medium">营业执照</p>
                                    <p class="text-xs text-gray-500 mt-1">有效期至: 2030-03-14</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">已验证</span>
                                <button onclick="viewDocument('business-license')" class="text-blue-600 text-xs">查看</button>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fas fa-id-card text-blue-600 text-lg mr-3"></i>
                                <div>
                                    <p class="text-sm font-medium">法人身份证</p>
                                    <p class="text-xs text-gray-500 mt-1">身份证号: 110***********1234</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">已验证</span>
                                <button onclick="viewDocument('id-card')" class="text-blue-600 text-xs">查看</button>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fas fa-file-alt text-orange-600 text-lg mr-3"></i>
                                <div>
                                    <p class="text-sm font-medium">税务登记证</p>
                                    <p class="text-xs text-gray-500 mt-1">税号: 91110000MA01234567</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">已验证</span>
                                <button onclick="viewDocument('tax-cert')" class="text-blue-600 text-xs">查看</button>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fas fa-certificate text-purple-600 text-lg mr-3"></i>
                                <div>
                                    <p class="text-sm font-medium">行业资质证书</p>
                                    <p class="text-xs text-gray-500 mt-1">增值电信业务经营许可证</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-1 rounded-full">待更新</span>
                                <button onclick="uploadDocument('qualification')" class="text-blue-600 text-xs">上传</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Information -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                    联系信息
                </h3>
                <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                    <div class="p-3 border-b border-gray-100">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">联系电话</span>
                            <div class="flex items-center">
                                <span class="text-sm font-medium mr-2">010-85123456</span>
                                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                            </div>
                        </div>
                    </div>
                    <div class="p-3 border-b border-gray-100">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">企业邮箱</span>
                            <div class="flex items-center">
                                <span class="text-sm font-medium mr-2">info@company.com</span>
                                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                            </div>
                        </div>
                    </div>
                    <div class="p-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">官方网站</span>
                            <div class="flex items-center">
                                <span class="text-sm font-medium mr-2">www.company.com</span>
                                <i class="fas fa-external-link-alt text-gray-400 text-xs"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Operation Status -->
            <div class="p-4 pb-8">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                    经营状态
                </h3>
                <div class="bg-green-50 rounded-lg border border-green-200 p-4">
                    <div class="flex items-center mb-3">
                        <i class="fas fa-check-circle text-green-600 text-xl mr-3"></i>
                        <div>
                            <p class="font-semibold text-green-800">正常经营</p>
                            <p class="text-sm text-green-700">企业状态良好，所有证照齐全有效</p>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-3 text-sm">
                        <div class="flex items-center">
                            <i class="fas fa-dot-circle text-green-600 text-xs mr-2"></i>
                            <span>营业执照有效</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-dot-circle text-green-600 text-xs mr-2"></i>
                            <span>税务状态正常</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-dot-circle text-green-600 text-xs mr-2"></i>
                            <span>年报已提交</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-dot-circle text-green-600 text-xs mr-2"></i>
                            <span>信用状态良好</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Action Bar -->
        <div class="absolute bottom-1 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3 shadow-lg">
            <div class="flex space-x-3">
                <button onclick="editCompanyInfo()" class="flex-1 bg-blue-600 text-white font-medium py-2.5 rounded-lg hover:bg-blue-700 transition-colors">
                    <i class="fas fa-edit mr-2"></i>编辑资料
                </button>
                <button onclick="downloadCertificate()" class="bg-gray-100 text-gray-700 font-medium px-4 py-2.5 rounded-lg hover:bg-gray-200 transition-colors">
                    <i class="fas fa-download"></i>
                </button>
            </div>
        </div>

        
    </div>

    <script>
        // Save company info
        function saveCompanyInfo() {
            showToast('保存中...');
            setTimeout(() => {
                showToast('企业资料保存成功！');
            }, 1000);
        }

        // Edit company info
        function editCompanyInfo() {
            window.location.href = 'b2b-company-edit.html';
        }

        // View document
        function viewDocument(docType) {
            const docNames = {
                'business-license': '营业执照',
                'id-card': '法人身份证',
                'tax-cert': '税务登记证',
                'qualification': '行业资质证书'
            };
            
            alert(`查看${docNames[docType]}\n\n将打开证照查看页面，显示完整的证照信息和扫描件。`);
        }

        // Upload document
        function uploadDocument(docType) {
            alert('上传证照\n\n请准备以下材料：\n• 证照扫描件（JPG/PNG格式）\n• 文件大小不超过5MB\n• 确保图片清晰完整');
        }

        // Download certificate
        function downloadCertificate() {
            showToast('正在生成企业资质证明...');
            setTimeout(() => {
                showToast('企业资质证明已发送至邮箱');
            }, 2000);
        }

        // Copy to clipboard
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(() => {
                showToast('已复制到剪贴板');
            }).catch(() => {
                showToast('复制失败，请手动复制');
            });
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('企业资料已加载');
        });
    </script>
</body>
</html>